<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>border-width效果</title>
	<style type="text/css">
		body {
			background-color: #eaf0f2;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.btn{
		  display:block;
		  width:120px;
		  height:32px;
		  line-height:32px;
		  border-radius:3px;
		  color:#fff;
		  text-decoration:none;
		  text-align:center;
		  font-size:14px;
		  background:#222;
		  margin: 0 auto;
		}
		.btn:before{
		  content:attr(title);
		}
		.btn:after{
		  content:"";
		  display:inline-block;
		  position:relative;
		  top:-3px;
		  left:5px;
		  border-left:5px solid transparent;
		  border-top:5px solid #fff;
		  border-right:5px solid transparent;
		  border-bottom-width:0px;
		}
		.btn.open:before{
		  content:attr(opentitle);
		}
		.btn.open:after{
		  border-top-width:0px;
		  border-left:5px solid transparent;
		  border-bottom:5px solid #fff;
		  border-right:5px solid transparent;
		}
	</style>
</head>
<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<a class="btn" title="展开更多" opentitle="折起" href="javascript:;"></a>
	<script type="text/javascript">
		var btn = document.querySelector('.btn');
		var flag = 1;
		btn.addEventListener('click',function(e){
		    e.preventDefault();
		    if(flag){
		      this.className = "btn open";
		      flag = 0;
		    }else{
		      this.className = "btn";
		      flag = 1;
		    }
		},false);
	</script>
</body>
</html>